<template>
  <div class="page-main home-main">
    <div class="container">
      <div class="home" v-for="(item, num) in home" :key="num">
        <div class="home-brick-box home-brick-row-2-box xm-plain-box">
          <div class="box-hd">
            <h2 class="title">{{ item.title }}</h2>
            <div class="more">
              <ul class="tab-list" v-if="item.brick.length > 1">
                <li @mouseover="mouseoverEvent($event, {index: index, num: num})" @mouseout="mouseoutEvent($event, {index: index, num: num})" ref="index" :class="[index === 0 ? 'tab-active' : '']" v-for="(more, index) in item.brick" :key="index">{{ more.title }}</li>
              </ul>
              <a v-else href="javascript:;" class="more-link">{{ item.brick[0].title }}</a>
            </div>
          </div>
          <div class="box-bd clearfix">
            <div class="row">
              <div class="span4">
                <ul class="brick-promo-list clearfix">
                  <li :class="['brick-item', `brick-item-${ item.promo.length < 2 ? 'l' : 'm' }`]" v-for="(promo, index) in item.promo" :key="index">
                    <a href="javascript:;">
                      <img :src="promo" alt="">
                    </a>
                  </li>
                </ul>
              </div>
              <div :class="['span16', index !== 0 ? 'hide' : '']" v-for="(brick, index) in item.brick" :key="index">
                <div>
                  <ul class="brick-list clearfix">
                    <li :class="['brick-item', 'brick-item-m', 'brick-item-m-2', index === brick.box.length - 1 && item.brick.length > 1 ? 'brick-active' : '']" v-for="(box, index) in brick.box" :key="index">
                      <a href="javascript:;" v-if="index !== brick.box.length - 1 || item.brick.length < 2">
                        <div class="figure figure-img">
                          <img :src="box.url" alt="">
                        </div>
                        <h3 class="title">{{ box.title }}</h3>
                        <p class="desc" v-if="box.desc">{{ box.desc }}</p>
                        <p class="price">
                          <span class="num">{{ box.price }}</span>元<span v-if="!box.del">起</span>
                          <del v-else>
                            <span class="num">{{ box.del }}</span>
                            元
                          </del>
                        </p>
                      </a>
                      <ul v-else>
                        <li class="brick-item-n brick-item-s" v-for="(item, index) in box" :key="index">
                          <a href="javascript:;">
                            <div class="figure figure-img" v-if="item.url">
                              <img :src="item.url" alt="">
                            </div>
                            <h3 class="title">{{ item.title }}</h3>
                            <p v-if="index === 1" class="brick-title">{{ brick.title }}</p>
                            <p class="desc" v-if="item.desc">{{ item.desc }}</p>
                            <p class="price" v-if="item.price">
                              <span class="num">{{ item.price }}</span>元<span v-if="!item.del">起</span>
                              <del v-else>
                                <span class="num">{{ item.del }}</span>
                                元
                              </del>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="home-banner-box">
          <a href="javascript:;">
            <img :src="item.banner" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      num: 0,
      home: [
        {
          title: '手机',
          promo: [
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=234&h=614&f=webp&q=90'
          ],
          brick: [
            {
              title: '查看全部',
              box: [
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米10',
                  desc: '骁龙865/1亿像素相机',
                  price: 3999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c1aafa589258a4d9fdf49831b457418d.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi K30 Pro',
                  desc: '双模5G，骁龙865，弹出全面屏',
                  price: 2999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/7cfdbce40301133a287e9e57faa37bdf.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi K30 Pro 变焦版',
                  desc: '双模5G，骁龙865，弹出全面屏',
                  price: 3799
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ccd09671448c4cdb4a3817f68f788662.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米10 Pro',
                  desc: '骁龙865 / 50倍变焦',
                  price: 4999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi K30',
                  desc: '120Hz流速屏，全速热爱',
                  price: 1699
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/53641901fbc28cbcdb495b17fdf69e46.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi K30 5G',
                  desc: '双模5G，120Hz流速屏',
                  price: 1999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d295c4fb500d163a7045dc715b47f808.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi 8',
                  desc: '5000mAh超长续航',
                  price: 699
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c924c3f3436b6934495fd98f159ee3f7.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi 8A',
                  desc: '5000mAh超长续航',
                  price: 599
                }
              ]
            }
          ],
          banner: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1226&h=120&f=webp&q=90'
        },
        {
          title: '家电',
          promo: [
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg?thumb=1&w=234&h=300&f=webp&q=90',
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b67de5a8ce9025fb5d8bac66e019d1c3.jpg?thumb=1&w=234&h=300&f=webp&q=90'
          ],
          brick: [
            {
              title: '热门',
              box: [
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ce424d6fe93dfb74733b5838140b7ee.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '米家互联网空调C1（一级能效）',
                  desc: '变频节能省电，自清洁',
                  price: 1999,
                  del: 2699
                },
                {
                  url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2b911be4c2f156bb6e4cf367c6080045.jpg?thumb=1&w=200&h=200',
                  title: '米家空调',
                  desc: '出众静音，快速制冷热',
                  price: 1299,
                  del: 1799
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '米家互联网洗烘一体机 Pro 10kg',
                  desc: '智能洗烘，省心省力',
                  price: 2999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米电视4A 32英寸',
                  desc: '人工智能系统，高清液晶屏',
                  price: 699,
                  del: 799
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8c63a2024528fe5410ebe669b7d2407.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi全自动波轮洗衣机1A 8kg',
                  desc: '一键操作，父母都爱用',
                  price: 799,
                  del: 899
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米全面屏电视E55A',
                  desc: '全面屏设计，人工智能语音',
                  price: 1799,
                  del: 1999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd2aa2dcad6440b469c22e27db9b6236.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '15.6" 四核i7 16G 独显 512G',
                  desc: '全面均衡的国民轻薄本',
                  price: 4899
                },
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg?thumb=1&w=100&h=100&f=webp&q=90',
                    title: 'Air 13.3" 2019款',
                    price: 4999
                  },
                  {
                    title: '浏览更多'
                  }
                ]
              ]
            },
            {
              title: '电视影音',
              box: [
                {
                  url: '//i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg',
                  title: '小米电视4A 32英寸',
                  desc: '人工智能系统，高清液晶屏',
                  price: 699,
                  del: 799
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米全面屏电视E55A',
                  desc: '全面屏设计，人工智能语音',
                  price: 1799,
                  del: 1999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3317a291b112aa4712059ad93263668.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米全面屏电视E65A',
                  desc: '全面屏设计，人工智能语音',
                  price: 2599,
                  del: 3099
                },
                {
                  url: '//i8.mifile.cn/b2c-mimall-media/ede227c1f0e3472fb8dcfae980d1e43f!200x200.jpg',
                  title: '小米电视4X 43英寸',
                  desc: 'FHD全高清屏，人工智能语音',
                  price: 1099,
                  del: 1399
                },
                {
                  url: '//i8.mifile.cn/v1/a1/cef8a9c0-2386-5b66-9ed2-6b1d4e4490bf!200x200.jpg',
                  title: '小米电视4C 55英寸',
                  desc: '4K HDR，人工智能系统',
                  price: 1699,
                  del: 1999
                },
                {
                  url: '//i8.mifile.cn/b2c-mimall-media/91b59cc6474e0cd777445b15adb13980!200x200.jpg',
                  title: '小米电视4A 65英寸',
                  desc: '4K HDR，人工智能语音系统',
                  price: 2599,
                  del: 2999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米壁画电视 65英寸',
                  desc: '壁画外观，全面屏，远场语音',
                  price: 6999
                },
                [
                  {
                    url: '//i8.mifile.cn/b2c-mimall-media/aa8a6ce3b2b1201d74d0197482f3403b!100x100.jpg',
                    title: '小米盒子4',
                    price: 299
                  },
                  {
                    title: '浏览更多'
                  }
                ]
              ]
            }
          ],
          banner: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1226&h=120&f=webp&q=90'
        },
        {
          title: '家电',
          promo: [
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg?thumb=1&w=234&h=300&f=webp&q=90',
            '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b67de5a8ce9025fb5d8bac66e019d1c3.jpg?thumb=1&w=234&h=300&f=webp&q=90'
          ],
          brick: [
            {
              title: '热门',
              box: [
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ce424d6fe93dfb74733b5838140b7ee.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '米家互联网空调C1（一级能效）',
                  desc: '变频节能省电，自清洁',
                  price: 1999,
                  del: 2699
                },
                {
                  url: '//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2b911be4c2f156bb6e4cf367c6080045.jpg?thumb=1&w=200&h=200',
                  title: '米家空调',
                  desc: '出众静音，快速制冷热',
                  price: 1299,
                  del: 1799
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '米家互联网洗烘一体机 Pro 10kg',
                  desc: '智能洗烘，省心省力',
                  price: 2999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米电视4A 32英寸',
                  desc: '人工智能系统，高清液晶屏',
                  price: 699,
                  del: 799
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8c63a2024528fe5410ebe669b7d2407.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: 'Redmi全自动波轮洗衣机1A 8kg',
                  desc: '一键操作，父母都爱用',
                  price: 799,
                  del: 899
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米全面屏电视E55A',
                  desc: '全面屏设计，人工智能语音',
                  price: 1799,
                  del: 1999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd2aa2dcad6440b469c22e27db9b6236.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '15.6" 四核i7 16G 独显 512G',
                  desc: '全面均衡的国民轻薄本',
                  price: 4899
                },
                [
                  {
                    url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg?thumb=1&w=100&h=100&f=webp&q=90',
                    title: 'Air 13.3" 2019款',
                    price: 4999
                  },
                  {
                    title: '浏览更多'
                  }
                ]
              ]
            },
            {
              title: '电视影音',
              box: [
                {
                  url: '//i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633!200x200.jpg',
                  title: '小米电视4A 32英寸',
                  desc: '人工智能系统，高清液晶屏',
                  price: 699,
                  del: 799
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米全面屏电视E55A',
                  desc: '全面屏设计，人工智能语音',
                  price: 1799,
                  del: 1999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3317a291b112aa4712059ad93263668.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米全面屏电视E65A',
                  desc: '全面屏设计，人工智能语音',
                  price: 2599,
                  del: 3099
                },
                {
                  url: '//i8.mifile.cn/b2c-mimall-media/ede227c1f0e3472fb8dcfae980d1e43f!200x200.jpg',
                  title: '小米电视4X 43英寸',
                  desc: 'FHD全高清屏，人工智能语音',
                  price: 1099,
                  del: 1399
                },
                {
                  url: '//i8.mifile.cn/v1/a1/cef8a9c0-2386-5b66-9ed2-6b1d4e4490bf!200x200.jpg',
                  title: '小米电视4C 55英寸',
                  desc: '4K HDR，人工智能系统',
                  price: 1699,
                  del: 1999
                },
                {
                  url: '//i8.mifile.cn/b2c-mimall-media/91b59cc6474e0cd777445b15adb13980!200x200.jpg',
                  title: '小米电视4A 65英寸',
                  desc: '4K HDR，人工智能语音系统',
                  price: 2599,
                  del: 2999
                },
                {
                  url: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg?thumb=1&w=200&h=200&f=webp&q=90',
                  title: '小米壁画电视 65英寸',
                  desc: '壁画外观，全面屏，远场语音',
                  price: 6999
                },
                [
                  {
                    url: '//i8.mifile.cn/b2c-mimall-media/aa8a6ce3b2b1201d74d0197482f3403b!100x100.jpg',
                    title: '小米盒子4',
                    price: 299
                  },
                  {
                    title: '浏览更多'
                  }
                ]
              ]
            }
          ],
          banner: '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1226&h=120&f=webp&q=90'
        }
      ]
    }
  },
  methods: {
    mouseoverEvent (e, index) {
      // this.num = index
      // e.target.classList.add('tab-active')
      console.log(this.num)
      this.$refs.index[(index.num - 1) * 2 + index.index].classList.add('tab-active')
      // console.log(this.$refs.index)
    },
    mouseoutEvent (e, index) {
      this.$refs.index[(index.num - 1) * 2 + index.index].classList.remove('tab-active')
      // e.target.classList.remove('tab-active')
    }
  }
}
</script>

<style lang="less" scoped>
.page-main {
  background-color: #f5f5f5;
  .xm-plain-box {
    .box-hd {
      position: relative;
      height: 58px;
      .title {
        margin: 0;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
      }
      .more {
        position: absolute;
        top: 0;
        right: 0;
        .tab-list {
          margin: 0;
          padding: 16px 0 0;
          list-style-type: none;
          font-size: 16px;
          li {
            display: inline-block;
            padding: 4px 0;
            margin: 0 15px;
            color: #424242;
            border-bottom: 2px solid rgba(0, 0, 0, 0);
            cursor: pointer;
          }
        }
      }
    }
  }
  .home-brick-box {
    .box-hd {
      .more {
        .more-link {
          font-size: 16px;
          line-height: 58px;
          color: #424242;
          transition: all .4s;
          &:hover {
            color: #ff6700;
          }
        }
        .tab-list {
          li {
            margin: 0 0 0 30px;
            &.tab-active,
            &:hover {
              color: #ff6700;
              border-bottom: 2px solid #ff6700;
            }
          }
        }
      }
    }
    .brick-list {
      width: 992px;
    }
    .brick-promo-list {
      height: 614px;
      margin: 0;
      padding: 0;
      list-style-type: none;
      a {
        display: block;
        width: 100%;
        height: 100%;
        img {
          width: 234px;
        }
      }
      .brick-item-l {
        height: 614px;
        img {
          height: 614px;
        }
      }
      .brick-item-m {
        height: 300px;
        padding: 0;
        img {
          height: 300px;
        }
      }
    }
    .brick-promo-list,
    .brick-list {
      margin: 0 0 -14px -14px;
    }
    .brick-item {
      position: relative;
      z-index: 1;
      float: left;
      width: 234px;
      margin-left: 14px;
      margin-bottom: 14px;
      background-color: #fff;
      transition: all .2s linear;
      &:hover {
        z-index: 2;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        transform: translate3d(0, -2px, 0);
      }
      &.brick-active {
        padding: 0;
        background-color: transparent;
        &:hover {
          box-shadow: none;
          transform: translate3d(0, 0, 0);
        }
        .title {
          height: auto;
          text-align: left;
          text-overflow: clip;
          white-space: normal;
          overflow: visible;
        }
        .brick-title {
          text-align: center;
          padding: 10px;
          color: #ff6700;
          font-size: 14px;
        }
        .price {
          text-align: left;
        }
        li {
          &:last-child {
            .title {
              font-size: 20px;
              margin: 0;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
.brick-item-m {
  height: 246px;
  padding: 34px 0 20px;
  .desc,
  .title {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .title {
    height: 21px;
    line-height: 21px;
    margin: 0 10px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
  }
  .desc {
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
  }
  .price {
    margin: 0 10px 10px;
    text-align: center;
    color: #ff6700;
    del {
      margin-left: .5em;
      color: #b0b0b0;
      text-decoration: line-through;
    }
  }
  .figure-img {
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;
    img {
      width: 150px;
      height: 150px;
    }
  }
}
.brick-item-m-2 {
  height: 260px;
  padding: 20px 0;
  .title {
    margin: 0 10px 2px;
  }
  .price {
    margin: 0 10px 14px;
  }
  .figure-img {
    width: 160px;
    height: 160px;
    img {
      width: 160px;
      height: 160px;
    }
  }
}
.brick-item-s {
  height: 93px;
  padding-top: 50px;
  .figure-img {
    position: absolute;
    right: 20px;
    top: 32px;
    width: 80px;
    height: 80px;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .title,
  a {
    color: #333;
  }
  .title {
    margin: -10px 110px 5px 30px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
  }
  .price {
    margin: 0 110px 0 30px;
    font-size: 12px;
    color: #ff6700;
    .num {
      font-size: 14px;
    }
  }
}
.brick-item-n {
  position: relative;
  z-index: 1;
  float: left;
  width: 234px;
  margin-bottom: 14px;
  background-color: #fff;
  transition: all .2s linear;
  &:hover {
    z-index: 2;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transform: translate3d(0, -2px, 0);
  }
}
.hide {
  display: none;
}
a {
  color: #757575;
  background-color: rgba(0, 0, 0, 0);
  &:hover {
    text-decoration: none;
  }
}
.row {
  margin-left: -14px;
  &::after,
  &::before {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}
.span4 {
  width: 234px;
}
img {
  border: 0;
}
.span4,
.span16 {
  float: left;
  margin-left: 14px;
  min-height: 1px;
}
.span16 {
  width: 978px;
}
.home-main {
  padding-top: 4px;
  padding-bottom: 12px;
}
.container {
  &::after,
  &::before {
    content: "";
    display: table;
  }
  &::before {
    clear: both;
  }
}
.home-brick-box {
  margin-bottom: 8px;
}
</style>
